import React from 'react'
import { useAppDispatch, useAppSelector } from '@/store/store'
import style from './index.module.scss'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import {remove} from '@/store/doctor'
const Index: React.FC = () => {
    const { list } = useAppSelector((state: any) => {
        return state.Doctor
    })
    const navigate = useNavigate()
    const dispatch = useAppDispatch()
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>我的备选医生</NavBar>
            {
                list.length>0? <div>
                    {
                list.map((item: any, index: number) => {
                    return (
                        <div key={index} >
                            <div className={style.box}>
                                <div>
                                    <img src={item.image} alt="" />
                                </div>
                                <div>
                                    <div style={{ fontSize: '18px' }}>{item.name}</div>
                                    <div>{item.type}</div>
                                    <div>{item.address}{item.hospital} {item.keshi
                                    }</div>
                                    <div className={style.sc}>擅长：{item.keshi
                                    }{item.shanc}</div>
                                </div>
                            </div>
                            <div> <button style={{border:'none' ,width:'100px',height:'30px',borderRadius:'15px',marginLeft:'200px',color:'#fff',background:'blue'}} onClick={()=>dispatch(remove(item))}>取消备选</button></div>
                        </div>
                    )
                })
            }
                </div>: <img style={{width:'100%'}} src="../../src/img/nonebj.png" alt="" />
            }
        </div>
    )
}

export default Index
